<template>
  <div>
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-select
        v-model="clusterId"
        clearable
        size="small"
        placeholder="请选择集群"
        class="filter-item"
      >
        <el-option
          v-for="item in clusterLists"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div style="display: flex;">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addClick"
        >新增</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="clusterList"
      border
    >
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="clusterName"
        label="集群名称"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="beforeParam"
        label="参数化映射"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="endParam"
        label="集群执行参数配置"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
            label="是否禁用"
            align="center"
            prop="disabled"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.disabled"
                active-color="#ff4949"
                inactive-color="#dcdfe6"
                active-value = "true"
                @change="changeEnabled(scope.row, scope.row.disabled)"
              />
            </template>
          </el-table-column>
      <el-table-column
        width="100px"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editClick(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteClick(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="current"
        :page-size="size"
        layout="prev, pager, next,sizes,total"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 编辑表单 -->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="closeEdit"
      :visible.sync="openEdit"
      :title="title"
      width="1000px"
    >
      <el-form
        ref="jqForm"
        :inline="true"
        label-width="180px"
        :rules="rules"
        :model="jqForm"
      >
        <el-form-item
          label="集群名称"
          prop="clusterId"
        >
          <el-select
        v-model="jqForm.clusterId"
        clearable
        size="small"
        placeholder="请选择集群"
        class="filter-item"
      >
        <el-option
          v-for="item in clusterLists"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
        </el-form-item>
        <el-form-item
          label="参数化映射"
          prop="beforeParam"
        >
          <el-input
            v-model="jqForm.beforeParam"
            style="width: 210px"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
          label="集群执行参数配置"
          prop="endParam"
        >
          <el-input
            v-model="jqForm.endParam"
            placeholder="请输入"
            :rows="5"
            type="textarea"
            style="width: 605px"
          />
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; margin-left: 45%">
        <el-button
          type="primary"
          plain
          @click="closeEdit"
        >取消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paramsApi from '@/api/script/config/params'
import clusterSparingApi from '@/api/cluster/clusterSparing'

export default {
  name: 'DataDesensitizationRules',
  data() {
    return {
      loading: false,
      current: 1,
      size: 10,
      length: 0,
      clusterList: [],
      clusterLists:[],
      clusterName: '',
      openEdit: false,
      clusterId:'',
      jqForm: {
        clusterId:'',
        beforeParam:'',
        endParam:'',
        disabled:''
      },
      title: '',
      versionList: ['CDH 6.3.2 (Parcel)'],
      rules: {
        clusterId: [
          { required: true, message: '请选择集群名称', trigger: 'change' }
        ],
        beforeParam: [
          { required: true, message: '请填写参数转换前参数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {

    initData(clusterId, resetPage) {
      this.clusterLists = []
      clusterSparingApi.findListByPage().then((res) => {
        const data = res.records
        data.forEach((array) => {
          this.clusterLists.push({ value: array.id, label: array.clusterName })
        })
      })
      if (resetPage) {
        this.current = 1
      }
      this.loading = true
      var data = {
        current: this.current,
        size: this.size,
        clusterId: clusterId
      }
      paramsApi.findListByPage(data)
        .then((data) => {
          console.log(data);
          this.length = data.totalElements
          if (data.content.length === 0) {
            this.jqForm = {}
          } else {
            this.jqForm = data.content[0]
          }
          this.clusterList = data.content
          this.loading = false
        })
        .catch(() => { })
    },
    search() {
      this.current = 1
      this.initData(this.clusterId)
    },
    reset() {
      this.clusterId = ''
      this.current = 1
      this.initData(this.clusterId)
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.initData()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.initData(null,false)
    },
    // 改变是否禁用状态
    changeEnabled(data, val) {
      this.$confirm('此操作将'+(val?'禁用':'取消禁用')+'此配置信息, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      paramsApi.edit(data).then(res=>{
        console.log(data);
      }).catch(()=>{
        data.disabled = !data.disabled
      })
      }).catch(()=>{
        data.disabled = !data.disabled
      })
    },
    editClick(row) {
      this.title = '编辑'
      var temp = {
        id:row.id,
        beforeParam:row.beforeParam,
        endParam:row.endParam,
        clusterId: row.clusterId,
      }
      this.jqForm = temp
      this.openEdit = true
    },
    closeEdit() {
      this.openEdit = false
      this.$refs['jqForm'].resetFields()
      this.jqForm = {}
    },
    deleteClick(row) {
      const h = this.$createElement
      this.$msgbox(
        {
          title: '提示',
          message: h('p', null, [
            h('span', { style: 'color: red' }, '此条数据'),
            h('span', null, '为参数转换数据，是否删除？')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }
      ).then(() => {
        paramsApi.del(row.id).then((data) => {
          this.initData()
        })
      }).catch(() => {
        return
      })
    },
    submit() {
      this.$refs['jqForm'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            paramsApi.edit(this.jqForm).then((data) => {
              this.initData()
              this.openEdit = false
            })
          } else {
            paramsApi.add(this.jqForm).then((data) => {
              this.initData()
              this.openEdit = false
              this.jqForm = {}
            })
          }
        } else {
          return false
        }
      })
    },

    addClick() {
      this.jqForm = {}
      this.title = '新增'
      this.openEdit = true
    }
  }
}
</script>
